<template>
	<view class="page-modify">
		<!--标题栏-->
		<bar-title bgColor="bg-gray">
			<block slot="content">{{isAdd?'添加收款支付宝':'更改收款支付宝'}}</block>
		</bar-title>
		
		<view class="margin alipay-warp" v-if="addtype=='alipay'">
			<view class="text-gray margin-bottom">请输入支付宝信息</view>
			<view class="from-info">
				<view class="cu-form-group">
					<view class="title">真实姓名</view>
					<input class="input" type="text" 
						placeholder="请输入姓名" 
						:value="alipay.alipayaname" 
						@blur="inputChange" 
						confirm-type="next"
						data-key="alipayaname"
					/>
				</view>
				<view class="cu-form-group">
					<view class="title">支付宝账号</view>
					<input class="input" type="text" 
						placeholder="请输入支付宝账号" 
						:value="alipay.alipayaccount" 
						@blur="inputChange" 
						confirm-type="next"
						data-key="alipayaccount"
					/>
				</view>
			</view>	
		</view>
		
		<view class="margin bank-warp" v-else>
			<view class="text-gray margin-bottom">请输入银行卡信息</view>
			<view class="from-info">
				<view class="cu-form-group">
					<view class="title">持卡人</view>
					<input class="input" type="text" 
						placeholder="持卡人姓名" 
						:value="bank.cardholder" 
						@blur="inputChange" 
						confirm-type="next"
						data-key="cardholder"
					/>
				</view>
				<view class="cu-form-group ">
					<view class="title">卡号</view>
					<input class="input" type="number" 
						placeholder="银行卡卡号" 
						:value="bank.bankcardnum" 
						@blur="inputChange" 
						confirm-type="next"
						data-key="bankcardnum"
					/>
				</view>
				<view class="cu-form-group ">
					<view class="title">银行</view>
					<input class="input" type="number" 
						placeholder="请填写开户行" 
						:value="bank.bankcardname" 
						@blur="inputChange" 
						confirm-type="next"
						data-key="bankcardname"
					/>
				</view>
			</view>
			
			<view class="photo-box">
				<view class="title">请拍摄并上传持卡人身份证照片</view>
				<view class="photo-content">
					<view class="photo">
						<image class="photo-img" mode="aspectFill"
							:src="bank.idenfrontphoto || '/static/img/s_idcardfront.png'" 
						></image>
						<view class="photo-text bg-cyan">拍摄身份证正面</view>
					</view>
					<view class="photo">
						<image class="photo-img" mode="aspectFill"
							:src="bank.idenbackphoto || '/static/img/s_idcardback.png'" 
						></image>
						<view class="photo-text bg-cyan">拍摄身份证反面</view>
					</view>
				</view>
			</view>
			
			<view class="photo-box">
				<view class="title">请拍摄并上传持卡人银行卡照片</view>
				<view class="photo-content">
					<view class="photo">
						<image class="photo-img" mode="aspectFill"
							:src="bank.bkcdfrontphoto || '/static/img/s_bankcardfront.png'" 
						></image>
						<view class="photo-text bg-cyan">拍摄银行卡正面</view>
					</view>
					<view class="photo">
						<image class="photo-img" mode="aspectFill"
							:src="bank.bkcdbackphoto || '/static/img/s_bankcardback.png'" 
						></image>
						<view class="photo-text bg-cyan">拍摄银行卡反面</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="padding">
			<button class="cu-btn bg-cyan lg block" 
				@click="formSubmit"
			>提交</button>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	// import bankCardAttribution from '@/common/card.js'
	var cos = require('@/common/cos');
	export default {
		data() {
			return {
				addtype: 'alipay',
				isAdd: true,
				alipay: {
					alipayaname: '',
					alipayaccount: ''
				},
				bank: {
					cardholder: "",
					bankcardnum: "",
					bankcardname: "",
					idenfrontphoto: "",
					idenbackphoto: "",
					bkcdfrontphoto: "",
					bkcdbackphoto: ""
				}
				
			}
		},
		onLoad(option) {
			if(option && option.bankcardid) {
				this.isAdd = !option.bankcardid
				this[this.addtype] = option
				console.log(this[this.addtype]);
			}
		},
		methods: {

			async formSubmit() {
				let fromName = "change" + this.addtype
				let checkRes = this.$graceChecker.check(
					this[this.addtype],
					this.$formRuleConfig[fromName]
				);
				if (!checkRes) {
					uni.showToast({
						title: this.$graceChecker.error,
						icon: "none"
					});
					return;
				}
				this.addAlipay()	
			},
			async addAlipay() {
				await this.$apis.addAlipay(this[this.addtype]);
				this.$mTool.showModal({
					content: '提交成功！',
					showCancel: false,
					success: res => {
						if (res.confirm) {
							this.$backPage()
						}
					}
				})
			},
			inputChange(event) {
				const key = event.currentTarget.dataset.key;
				this[this.addtype][key] = event.detail.value;
			},
			imgclick(key) {
				cos.postObject(url => {
					this[key] = url
				})
			}

		}

	}
</script>

<style lang="scss" scoped>
.page-modify{
	.from-info{
		border-radius: 20rpx;
		overflow: hidden;
		.title{
			width: 200rpx;
			text-indent: 10rpx;
		}
	}
	.photo-box{
		background-color: #FFFFFF;
		margin-top: 28rpx;
		border-radius: 20rpx;
		.title{
			line-height: 90rpx;
			color: #000000;
			font-size: 30rpx;
			margin: 0 40rpx;
		}
		.photo-content{
			padding: 0 20rpx 50rpx;
			display: flex;
		}
		.photo{
			overflow: hidden;
			border-radius: 10rpx;
			margin: 0 10rpx;
		}
		.photo-img{
			width: 304rpx;
			height: 206rpx;
			background-color: #F4F8FE;
			display: flex;
		}
		.photo-text{
			line-height: 56rpx;
			text-align: center;
		}
	}
}

</style>
